<style>
.bg {
 background-color: blue;
 height: 1px;
 border: 0;
}
</style>

<template>
  <div>
    <criteria-paged :model="model" v-ref:apage>
      <criteria partial='criteria' @condition-changed='search' v-ref:acondition>
        <div partial>
          <form>
          <div class="form-group">
            <img src="../../../static/singleleft2.png" width="25" height="25"
            @click="this.$back('items')"></img>
            <center><label for="f_area" style="align:center">当前小区：{{$parent.$parent.f_residential_area}}</label>
            </center>
            <!-- <a href="#" class="btn btn-primary" @click="this.$back('items')">&lt;&lt;</a> -->
          </div>
            <div class="form-group">
              <label for="f_keyword">地址关键字：</label>
              <input class="form-group" id="f_keyword"
              v-model=model.f_keyword condition="(f_building like '%{}%' or f_unit like '%{}%' or f_floor like '%{}%' or f_room like '%{}%' or f_address like '%{}%')" />
            </div>
            <div class="form-group">
              <label for="f_state">维修状态：</label>
              <v-select id="f_state" :value.sync="model.f_repaired"
              :options='$parent.$parent.check_states' placeholder='请选择安检状态'
              v-model="model.f_repaired" condition="f_repaired='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_state">隐患级别：</label>
              <v-select id="f_state" :value.sync="model.f_defect_urgency"
              :options='$parent.$parent.f_defect_urgencies' placeholder='请选择隐患级别'
              v-model="model.f_defect_urgency" condition="f_defect_urgency='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_upload_state">上传状态：</label>
              <v-select id="f_upload_state" :value.sync="model.f_repaired_uploaded"
              :options='$parent.$parent.upload_states' placeholder='请选择上传状态'
              v-model="model.f_repaired_uploaded" condition="f_repaired_uploaded='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_check_type">用户类型：</label>
              <v-select id="f_check_type" :value.sync="model.f_check_type"
              :options='$parent.$parent.user_types' placeholder='请选择用户类型'
              v-model="model.f_check_type" condition="f_check_type='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_check_type">审核状态：</label>
              <v-select id="f_check_type" :value.sync="model.f_repair_approved"
              :options='$parent.$parent.approved_states' placeholder='请选择审核状态'
              v-model="model.f_repair_approved" condition="f_repair_approved='{}'" close-on-select clear-button></v-select>
            </div>
            <button type="button" class="btn btn-success" @click="search">查询</button>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div @click="$parent.$parent.$parent.inspect(row)" class="col-md-12 col-lg-12">
            <table class="table table-striped" align="center">
              <tbody>
                <tr>
                  <td class="h5">小区：</td>
                  <td>{{row.f_residential_area}}</td>
                </tr>
                <tr>
                  <td class="h5">楼号：</td>
                  <td>{{row.f_building}}</td>
                </tr>
                <tr>
                  <td class="h5">单元：</td>
                  <td>{{row.f_unit}}</td>
                </tr>
                <tr>
                  <td class="h5">楼层：</td>
                  <td>{{row.f_floor}}</td>
                </tr>
                <tr>
                  <td class="h5">房号：</td>
                  <td>{{row.f_room}}</td>
                </tr>
                <tr>
                  <td class="h5">地址：</td>
                  <td>{{row.f_address}}</td>
                </tr>
                <tr>
                  <td class="h5">用户名：</td>
                  <td>{{row.f_user_name}}</td>
                </tr>
                <tr>
                  <td class="h5">用户类型：</td>
                  <td>{{row.f_check_type}}</td>
                </tr>
                <tr>
                  <td class="h5">隐患级别：</td>
                  <td>{{row.f_defect_urgency}}</td>
                </tr>
                <tr>
                  <td class="h5">维修状态：</td>
                  <td>{{row.f_repaired}}</td>
                </tr>
                <tr>
                  <td class="h5">上传状态：</td>
                  <td>{{row.f_repaired_uploaded}}</td>
                </tr>
                <tr>
                  <td class="h5">审核状态：</td>
                  <td>{{row.f_repair_approved}} <button type="button" class="btn btn-success" @click.stop="$parent.$parent.$parent.getVerify(row)">更新</button></td>
                </tr>
                <tr>
                  <td class="h5">审核意见：</td>
                  <td>{{row.f_repair_approved_note}}</td>
                </tr>
              </tbody>
            </table>
            <hr class="bg" />
          </div>
        </div>
      </list>
    </criteria-paged>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import LocalPagedList from './LocalPagedList'
import Vue from 'vue'
import { PagedList } from 'vue-client'

export default {
  title: '维修单列表界面',
  props: ['f_residential_area'],
  data() {
    return {
      model: Vue.android ? new LocalPagedList('维修单列表', 5, {f_repairman: 'this.repairman', f_residential_area: 'this.f_residential_area'}) : new PagedList(Vue.url + 'sql/维修单列表', 5, {f_repairman: 'this.repairman'}),
      f_defect_urgencies: [
        {label: '请选择隐患级别', value: null},
        {label: 'A', value: 'A'},
        {label: 'B', value: 'B'},
        {label: 'C', value: 'C'}
      ],
      check_states: [
        {label: '请选择维修状态', value: null},
        {label: '未修', value: '未修'},
        {label: '在修', value: '在修'},
        {label: '已修', value: '已修'}
      ],
      upload_states: [
        {label: '请选择上传状态', value: null},
        {label: '未传', value: '未传'},
        {label: '已传', value: '已传'}
      ],
      user_types: [
        {label: '请选择用户类型', value: null},
        {label: '居民', value: '居民'},
        {label: '工商', value: '工商'},
        {label: '锅炉', value: '锅炉'},
      ],
      approved_states: [
        {label: '请选择审核类型', value: null},
        {label: '已审核', value: '已审核'},
        {label: '未审核', value: '未审核'},
        {label: '打回', value: '打回'},
        {label: '重修', value: '重修'},
      ],
    }
  },
  methods: {
    refresh() {
      console.log("refresh items state")
      // hard code relationship
      this.$children[0].$children[1].search()
    },
    inspect(row) {
      if(row.f_check_type == '居民') {
        this.$goto('check-paper', {f_plan_id: this.f_plan_id, item: row, role: 'repair'}, 'self', this.refresh)
      } else {
        this.$goto('check-paper-noncivil', {f_plan_id: this.f_plan_id, item: row, role: 'repair'}, 'self', this.refresh)
      }
    },
    getVerify (row) {
      console.log('row.id:' + row.id)
      HostApp.__callback__ = this.callback
      HostApp.__this__ = this
      HostApp.refreshRepairApproval({id: row.id})
    },
    callback (flag) {
      if (flag) {
        HostApp.alert('更新成功！')
        this.$refs.apage.$refs.acondition.search()
      } else {
        HostApp.alert('更新失败！')
      }
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
  },
  ready() {
      this.model.f_residential_area = this.f_residential_area
      this.model.repairman = Vue.user.name
      this.refresh()
  }
}
</script>
